<template>
    <el-form
        :model="formData"
        :rules="rules"
        ref="formRef"
        label-width="120px"
        class="travel-agency-form"
    >
        <!-- 旅行社名称 -->
        <el-form-item label="旅行社名称" prop="name">
            <el-input v-model="formData.name" placeholder="请输入旅行社全称" />
        </el-form-item>

        <!-- 联系人 -->
        <el-form-item label="联系人" prop="contact">
            <el-input v-model="formData.contact" placeholder="请输入联系人姓名" />
        </el-form-item>

        <!-- 电话 -->
        <el-form-item label="联系电话" prop="phone">
            <el-input v-model="formData.phone" placeholder="请输入11位手机号码" />
        </el-form-item>

        <!-- 地址 -->
        <el-form-item label="营业地址" prop="address">
            <el-input
                v-model="formData.address"
                type="textarea"
                :rows="3"
                placeholder="请输入详细营业地址"
            />
        </el-form-item>

        <!-- 营业执照 -->
        <el-form-item label="营业执照" prop="license">
            <el-upload
                v-model:file-list="formData.license"
                :action="uploadUrl"
                :before-upload="handleLicenseUpload"
                :limit="1"
                accept=".jpg,.jpeg,.png,.pdf"
            >
                <el-button type="primary">点击上传</el-button>
                <template #tip>
                    <div class="el-upload__tip">支持JPG/PNG/PDF格式，大小不超过2MB</div>
                </template>
            </el-upload>
        </el-form-item>

        <!-- 经营许可证 -->
        <el-form-item label="经营许可证" prop="permit">
            <el-upload
                v-model:file-list="formData.permit"
                :action="uploadUrl"
                :before-upload="handlePermitUpload"
                :limit="1"
                accept=".jpg,.jpeg,.png,.pdf"
            >
                <el-button type="primary">点击上传</el-button>
                <template #tip>
                    <div class="el-upload__tip">支持JPG/PNG/PDF格式，大小不超过2MB</div>
                </template>
            </el-upload>
        </el-form-item>

        <!-- 提交按钮 -->
        <el-form-item>
            <el-button type="primary" @click="submitForm" :loading="isLoading">
                提交申请
            </el-button>
        </el-form-item>
    </el-form>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

// 表单引用
const formRef = ref()
// 加载状态
const isLoading = ref(false)

// 表单数据
const formData = ref({
    name: '',
    contact: '',
    phone: '',
    address: '',
    license: [],
    permit: []
})

// 表单验证规则
const rules = {
    name: [
        { required: true, message: '请输入旅行社名称', trigger: 'blur' },
        { min: 2, max: 50, message: '名称长度在2到50个字符之间', trigger: 'blur' }
    ],
    contact: [
        { required: true, message: '请输入联系人姓名', trigger: 'blur' },
        {
            pattern: /^[\u4e00-\u9fa5a-zA-Z\s]{2,20}$/,
            message: '请输入有效的中文或英文姓名',
            trigger: 'blur'
        }
    ],
    phone: [
        { required: true, message: '请输入联系电话', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号码', trigger: 'blur' }
    ],
    address: [
        { required: true, message: '请输入详细营业地址', trigger: 'blur' },
        { max: 200, message: '地址长度不能超过200个字符', trigger: 'blur' }
    ],
    license: [{ required: true, message: '请上传营业执照', trigger: 'change' }],
    permit: [{ required: true, message: '请上传经营许可证', trigger: 'change' }]
}

// 上传地址（根据实际接口修改）
const uploadUrl = 'https://api.example.com/upload'

// 营业执照上传验证
const handleLicenseUpload = (file) => {
    const isValidType = ['image/jpeg', 'image/png', 'application/pdf'].includes(file.type)
    const isValidSize = file.size / 1024 / 1024 < 2

    if (!isValidType) {
        ElMessage.error('只能上传JPG/PNG/PDF格式的文件')
        return false
    }

    if (!isValidSize) {
        ElMessage.error('文件大小不能超过2MB')
        return false
    }

    return true
}

// 经营许可证上传验证
const handlePermitUpload = (file) => {
    return handleLicenseUpload(file) // 复用相同的验证逻辑
}

// 表单提交
const submitForm = () => {
    formRef.value.validate((valid) => {
        if (valid) {
            isLoading.value = true
            // 模拟API请求
            setTimeout(() => {
                ElMessage.success('提交成功')
                isLoading.value = false
                // 这里执行实际的提交操作
            }, 1000)
        } else {
            ElMessage.error('请检查表单填写')
            return false
        }
    })
}
</script>

<style scoped>
.travel-agency-form {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.el-upload__tip {
    font-size: 12px;
    color: #999;
    margin-top: 8px;
}
</style>
